<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>

    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content="云收藏 | 让收藏更简单 |收藏夹 |网络收藏夹"/>
    <meta name="author" content=""/>
    <meta http-equiv="refresh" content="6;url=/lookAround" />

    <title>云收藏 | 让收藏更简单</title>
    <link rel="icon" href="/img/icon.ico" type="image/x-icon" />
    <!-- Bootstrap Core CSS -->
    <link href="index/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Theme CSS -->
    <link href="index/css/freelancer.min.css" rel="stylesheet" />

    <!-- Custom Fonts -->
    <link href="index/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

    <style>
        #portfolio .portfolio-item .portfolio-link .caption .caption-content{ top:36%;}
        #portfolio .portfolio-item .portfolio-link .caption .caption-content p{ font-size:16px; line-height:24px; margin:24px 16px 0;}
        #portfolio .portfolio-item .portfolio-link{ height: 260px; overflow:hidden; }
        #portfolio .portfolio-item:nth-child(1) .portfolio-link{ background: #ba4c63;}
        #portfolio .portfolio-item:nth-child(2) .portfolio-link{ background: #1fa4b6;}
        #portfolio .portfolio-item:nth-child(3) .portfolio-link{ background: #f8a3a3;}
        #portfolio .portfolio-item:nth-child(4) .portfolio-link{ background: #1d83c1;}
        #portfolio .portfolio-item:nth-child(5) .portfolio-link{ background: #18bc9c;}
        #portfolio .portfolio-item:nth-child(6) .portfolio-link{ background: #ccb2a3;}
        #portfolio .portfolio-item .portfolio-link .img-responsive{ width: 180px; height: 180px; display: block; border-radius: 50%; margin: 40px auto; }
    </style>


</head>

<body id="page-top" class="index">

    <!-- Navigation -->
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="#page-top">云收藏</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/lookAround">瞅一瞅</a>
                    </li>
                    <li>
                        <a href="/login" th:unless="${user != null}">登录</a>
                        <a href="/" th:if="${user != null}" th:text="${user.userName}" class="userName"></a>
                    </li>
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>


                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!-- Header -->
    <header>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <img class="img-responsive" src="index/img/profile.png" alt="" />
                    <div class="intro-text">
                        <span class="name">云收藏</span>
                        <hr class="star-light"/>
                        <span class="skills">随时随地 - 方便快捷 - 智慧收藏</span><br/>
                        <span class="skills">QQ交流群：708345713</span>
                    </div>
                </div>
            </div>
        </div>
    </header>


    <!-- Portfolio Grid Section -->
    <section id="portfolio">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>云收藏的收藏家</h2>
                    <hr class="star-primary"/>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4 portfolio-item">
                    <a href="/lookAround" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                                <p>我是一个风骚的程序员</p>
                            </div>
                        </div>
                        <img src="index/img/portfolio/cabin.png" class="img-responsive" alt="" />
                    </a>
                </div>
                <div class="col-sm-4 portfolio-item">
                    <a href="/lookAround" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                                <p>我是一个有逼格的设计师</p>
                            </div>
                        </div>
                        <img src="index/img/portfolio/cake.png" class="img-responsive" alt="" />
                    </a>
                </div>
                <div class="col-sm-4 portfolio-item">
                    <a href="/lookAround" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                                <p>我是一个有风格的建筑师</p>
                            </div>
                        </div>
                        <img src="index/img/portfolio/circus.png" class="img-responsive" alt="" />
                    </a>
                </div>
                <div class="col-sm-4 portfolio-item">
                    <a href="/lookAround" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                                <p>我是一个游戏狂，看看我的收藏吧！</p>
                            </div>
                        </div>
                        <img src="index/img/portfolio/game.png" class="img-responsive" alt="" />
                    </a>
                </div>
                <div class="col-sm-4 portfolio-item">
                    <a href="/lookAround" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                                <p>我是一个保险柜..</p>
                            </div>
                        </div>
                        <img src="index/img/portfolio/safe.png" class="img-responsive" alt=""/>
                    </a>
                </div>
                <div class="col-sm-4 portfolio-item">
                    <a href="/lookAround" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                                <p>我是宅男，我喜欢潜水..</p>
                            </div>
                        </div>
                        <img src="index/img/portfolio/submarine.png" class="img-responsive" alt="" />
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!--  <section id="portfolio">
         <div class="container">
             <div class="row">
                 <div class="col-lg-12 text-center">
                     <h2>云收藏的收藏家</h2>
                     <hr class="star-primary"/>
                 </div>
             </div>
             <div class="row">
                 <div th:if="${collector.mostCollectUser != null}" class="col-sm-4 portfolio-item">
                     <a  th:href="'/collector/'+${collector.mostCollectUser.id}+'/0'" class="portfolio-link">
                         <div class="caption">
                             <div class="caption-content">
                                 <i class="fa fa-search-plus fa-3x"></i>
                                 <p>我收藏的文章最多，我收藏我快乐！</p>
                                 <p th:text="${collector.mostCollectUser.introduction == null ? '暂无简介' : collector.mostCollectUser.introduction.length() gt 15 ? collector.mostCollectUser.introduction.substring(0,15)+'...' : collector.mostCollectUser.introduction}">暂无简介</p>
                             </div>
                         </div>
                         <img th:src="@{(${collector.mostCollectUser.profilePicture} == null ? @{/index/img/portfolio/cabin.png}:'/'+${collector.mostCollectUser.profilePicture})}" alt="" class="img-responsive"/>
                     </a>
                 </div>
                 <div th:if="${collector.mostFollowedUser != null}" class="col-sm-4 portfolio-item">
                     <a th:href="'/collector/'+${collector.mostFollowedUser.id}+'/0'" class="portfolio-link">
                         <div class="caption">
                             <div class="caption-content">
                                 <i class="fa fa-search-plus fa-3x"></i>
                                 <p>关注我的人最多,我是人气王！</p>
                                 <p th:text="${collector.mostFollowedUser.introduction == null ? '暂无简介' : collector.mostFollowedUser.introduction.length() gt 15 ? collector.mostFollowedUser.introduction.substring(0,15)+'...' : collector.mostFollowedUser.introduction}">暂无简介</p>
                             </div>
                         </div>
                         <img th:src="@{(${collector.mostFollowedUser.profilePicture} == null ? @{/index/img/portfolio/cake.png}:'/'+${collector.mostFollowedUser.profilePicture})}" alt="" class="img-responsive"/>
                     </a>
                 </div>
                 <div th:if="${collector.mostPraisedUser != null}" class="col-sm-4 portfolio-item">
                     <a th:href="'/collector/'+${collector.mostPraisedUser.id}+'/0'" class="portfolio-link">
                         <div class="caption">
                             <div class="caption-content">
                                 <i class="fa fa-search-plus fa-3x"></i>
                                 <p>赞我文章的人最多，大家都来赞赞赞！</p>
                                 <p th:text="${collector.mostPraisedUser.introduction == null ? '暂无简介' : collector.mostPraisedUser.introduction.length() gt 15 ? collector.mostPraisedUser.introduction.substring(0,15)+'...' : collector.mostPraisedUser.introduction}">暂无简介</p>
                             </div>
                         </div>
                         <img th:src="@{(${collector.mostPraisedUser.profilePicture} == null ? @{/index/img/portfolio/circus.png}:'/'+${collector.mostPraisedUser.profilePicture})}" alt="" class="img-responsive"/>
                     </a>
                 </div>
                 <div th:if="${collector.mostCommentedUser != null}" class="col-sm-4 portfolio-item">
                     <a  th:href="'/collector/'+${collector.mostCommentedUser.id}+'/0'" class="portfolio-link">
                         <div class="caption">
                             <div class="caption-content">
                                 <i class="fa fa-search-plus fa-3x"></i>
                                   <p>评论我文章的人最多，快看我收藏了什么！</p>
                                   <p th:text="${collector.mostCommentedUser.introduction == null ? '暂无简介' : collector.mostCommentedUser.introduction.length() gt 15 ? collector.mostCommentedUser.introduction.substring(0,15)+'...' : collector.mostCommentedUser.introduction}">暂无简介</p>
                             </div>
                         </div>
                         <img th:src="@{(${collector.mostCommentedUser.profilePicture} == null ? @{/index/img/portfolio/game.png}:'/'+${collector.mostCommentedUser.profilePicture})}" alt="" class="img-responsive"/>
                     </a>
                 </div>
                 <div th:if="${collector.mostPopularUser != null}"  class="col-sm-4 portfolio-item">
                     <a th:href="'/collector/'+${collector.mostPopularUser.id}+'/0'" class="portfolio-link">
                         <div class="caption">
                             <div class="caption-content">
                                 <i class="fa fa-search-plus fa-3x"></i>
                                  <p>我最受欢迎，想不想关注我！</p>
                                  <p th:text="${collector.mostPopularUser.introduction == null ? '暂无简介' : collector.mostPopularUser.introduction.length() gt 15 ? collector.mostPopularUser.introduction.substring(0,15)+'...' : collector.mostPopularUser.introduction}">暂无简介</p>
                             </div>
                         </div>
                         <img th:src="@{(${collector.mostPopularUser.profilePicture} == null ? @{/index/img/portfolio/safe.png}:'/'+${collector.mostPopularUser.profilePicture})}" alt="" class="img-responsive"/>
                     </a>
                 </div>
                 <div th:if="${collector.mostActiveUser != null}" class="col-sm-4 portfolio-item">
                     <a th:href="'/collector/'+${collector.mostActiveUser.id}+'/0'" class="portfolio-link">
                         <div class="caption">
                             <div class="caption-content">
                                 <i class="fa fa-search-plus fa-3x"></i>
                                  <p>近一个月我最活跃，快来超越我！</p>
                                 <p th:text="${collector.mostActiveUser.introduction == null ? '暂无简介' : collector.mostActiveUser.introduction.length() gt 15 ? collector.mostActiveUser.introduction.substring(0,15)+'...' : collector.mostActiveUser.introduction}">暂无简介</p>
                             </div>
                         </div>
                         <img th:src="@{(${collector.mostActiveUser.profilePicture} == null ? @{/index/img/portfolio/submarine.png}:'/'+${collector.mostActiveUser.profilePicture})}" alt="" class="img-responsive"/>
                     </a>
                 </div>
             </div>
         </div>
     </section>-->

    <!-- About Section -->
    <section class="success" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>关于我们</h2>
                    <hr class="star-light"/>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-lg-offset-2">
                    <p>我们做了一个可以在线随时随地简单收藏的一个网站 
                    <br/>可以在这个网站上分类整理收藏的网站或者文章，也可以查看别人都收藏了些什么。
                    <br/>可以从浏览器收藏夹导入到我们的网站，也可以从我们的网站导出去做备份。
                    <br/>根据共同的收藏可以找出我们相互兴趣的人。
                    </p>
                </div>
                <div class="col-lg-4">
                    <p>我们是一群热爱生活，热爱开源，热爱分享的IT人！
                     <br/>开放、自由、分享、开源是我们的主题！
                     <br/>当您的浏览器收藏夹收藏的网站或者文章大于1000份的时候，找东西绝对是个体力活。
                     <br/>那就让云收藏帮您解决吧，方便分类、整理、查询、搜索。
                     </p>
                </div>
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <a href="https://github.com/cloudfavorites" class="btn btn-lg btn-outline">
                        <i class="fa fa-download"></i> GITHUB--关注我们
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!--Contact Section -->
    <section id="contact">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>联系我们</h2>
                    <hr class="star-primary"/>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <br/><br/><br/>

                    <p>  云收藏是一个使用 Spring Boot 构建的开源网站，可以让用户在线随时随地收藏的一个网站，在网站上分类整理收藏的网站或者文章，可以作为稍后阅读的一个临时存放。
                        作为一个开放开源的软件，可以让用户从浏览器将收藏夹内容导入到云收藏，也支持随时将云收藏收集的文章导出去做备份。
                    </p>
                    <p>
                        <strong>核心功能点：</strong>
                        <br/>  - 收藏、分类、检索文章
                        <br/>  - 导出、导出（包活从浏览器中）
                        <br/>  - 可以点赞、分享、讨论
                        <br/>  - 注册、登录、个人账户
                        <br/>  - 临时收藏、查看别人收藏
                        <br/>  - 其它…
                    </p>
                    <p>
                        你有两种方式可以找到我们：<br/><br/>
                        1、发邮件到这里
                         <a href="mailto:cloudfavorites@126.com">
                            cloudfavorites@126.com
                        </a>
                        <br/>
                        2、github上面
                        <a  href="https://github.com/cloudfavorites">
                            关注我们
                        </a>
                        <br/>
                        3、如果您觉得还有完善的地方，<a href="/feedback">请给我们提建议！</a>
                    </p>
                    <p>
                        平时工作很忙，一个人维护这个系统有时候也忙不过来，如果你有兴趣我们可以一起来做，欢迎联系我！
                    </p>

                  <!--form name="sentMessage" id="contactForm" novalidate="novalidate">
                        <div class="row control-group">
                            <div class="form-group col-xs-12 floating-label-form-group controls">
                                <label>姓名</label>
                                <input type="text" class="form-control" placeholder="姓名" id="name" required="required" data-validation-required-message="Please enter your name." />
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="row control-group">
                            <div class="form-group col-xs-12 floating-label-form-group controls">
                                <label>邮箱</label>
                                <input type="email" class="form-control" placeholder="邮箱" id="email" required="required" data-validation-required-message="Please enter your email address."/>
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="row control-group">
                            <div class="form-group col-xs-12 floating-label-form-group controls">
                                <label>电话</label>
                                <input type="tel" class="form-control" placeholder="电话" id="phone" required="required" data-validation-required-message="Please enter your phone number."/>
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="row control-group">
                            <div class="form-group col-xs-12 floating-label-form-group controls">
                                <label>信息</label>
                                <textarea rows="5" class="form-control" placeholder="信息" id="message" required="required" data-validation-required-message="Please enter a message."></textarea>
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <br/>
                        <div id="success"></div>
                        <div class="row">
                            <div class="form-group col-xs-12">
                                <button type="submit" class="btn btn-success btn-lg">发送</button>
                            </div>
                        </div>
                    </form-->
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="text-center">
        <div class="footer-above">
            <div class="container">
                <div class="row">
                    <div class="footer-col col-md-4">
                        <h3>位置</h3>
                        <p>银河系
                        <br./>地球, 中国，北京</p>
                    </div>
                    <div class="footer-col col-md-4">
                        <h3>联系我们</h3>
                        <ul class="list-inline">
                            <li>
                                <img src="http://www.ityouknow.com/assets/images/keeppuresmile.jpg" style="width: 60%;" />
                            </li>
                        </ul>
                    </div>
                    <div class="footer-col col-md-4">
                        <h3>关于网站</h3>
                        <p>程序员的收藏社区</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-below">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        Copyright &copy; favorites 2016-2018
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
    <div class="scroll-top page-scroll hidden-sm hidden-xs hidden-lg hidden-md">
        <a class="btn btn-primary" href="#page-top">
            <i class="fa fa-chevron-up"></i>
        </a>
    </div>

    <!-- jQuery -->
    <script src="index/vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="index/vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

    <!-- Contact Form JavaScript -->
    <script src="index/js/jqBootstrapValidation.js"></script>
    <script src="index/js/contact_me.js"></script>

    <!-- Theme JavaScript -->
    <script src="index/js/freelancer.min.js"></script>
   	<div style="display:none">
   	  <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1260466344'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1260466344' type='text/javascript'%3E%3C/script%3E"));</script>
    </div>
</body>

</html>
